<!--车间用汽-->
<template>
  <div class="workshop">
    <div class="operate card">
      <!-- <div>时间维度:</div> -->
      <div>
        <el-select style="width:70px" v-model="t_value" @change="t_change">
          <el-option v-for="item in options_t_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- <div>时间区间:</div> -->
      <div>
        <el-date-picker style="width:150px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择日期时间"></el-date-picker>
      </div>
      <div class="hidden-xs-only">
        <i class="el-icon-minus"></i>
      </div>
      <div>
        <el-tooltip :content="content" placement="top">、
          <el-date-picker style="width:150px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择日期时间"></el-date-picker>
        </el-tooltip>
      </div>
      <!-- <div>选择车间:</div> -->
      <div>
        <el-select style="width:150px" v-model="Workshop_value" @change="change_Workshop">
          <el-option v-for="item in Workshop" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <!-- <div>选择生产线:</div> -->
      <div>
        <el-select style="width:190px" v-model="ProductionLine_value">
          <el-option v-for="item in ProductionLine" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" :disabled="!ProductionLine_value&&!Workshop_value" @click="t_button">查询</el-button>
      </div>
      <div class="export">
        <el-tooltip content="导出" :disabled="!ProductionLine_value&&!Workshop_value" placement="top">
          <el-button type :disabled="!ProductionLine_value&&!Workshop_value" @click="t_export">
            <i style="color:#0780EDfont-size:20px" class="iconfont icon-daochu"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="用汽情况"></Mtitle>
        <ecline v-loading="ecline_loading" style="height:400px" unit="t" :ecdata="ecb_data" width="100%" height="100%"></ecline>
      </el-col>
    </el-row>
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="车间用汽详情"></Mtitle>
        <tb :tableTitle="year_month_type_showtable?'tb_0010':'tb_009'" :tableData="tableData" v-loading="loading_table"></tb>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import day from "@/utils/day.js"
import Mtitle from '@/components/Mtitle'
import ecline from '@/components/echarts/ec_line'
import tb from '@/components/table'
export default {
  components: {
    Mtitle,
    tb,
    ecline
  },
  watch: {
  },
  data() {
    return {
      content: '查询时间跨度最大为31天',
      export_show: false,
      show_Time: true,
      loading_table: true,
      ecline_loading: true,
      page: {
        pageSize: 100,
        totalCount: 0,
        current_page: 1
      },
      radio_value: 1,
      // 图表数据
      ecb_data: [],
      tableData: [],
      // 导出弹出框
      centerDialogVisible: false,
      // 监听下拉数据获取到  ===3
      ProductionLine_Workshop_value: 1,
      // 获取生产线下拉列表
      ProductionLine: [],
      ProductionLine_value: null,
      // 获取车间下拉列表
      Workshop: [],
      Workshop_value: null,
      export_Workshop_value: null,
      year_month_type_showtable: false,
      d_type: "date",
      s_time: "",
      e_time: "",
      v_type: "yyyy-MM-dd",
      // 日月年
      t_value: 2,
      options_t_type: [
        // {
        //   value: 1,
        //   label: "日"
        // },
        {
          value: 2,
          label: "月"
        },
        {
          value: 3,
          label: "年"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      export_s_time: '',
      export_e_time: '',
      export_value: ''
    }
  },
  watch: {
    ProductionLine_Workshop_value(a, b) {
      if (a === 3) {
        // 车间用汽统计表格
        this.detailDataForDay()
        // 车间用汽统计-用汽曲线
        this.curveData()
      }
    }
  },
  mounted() {
  },
  created() {
    // 初始化默认时间
    this.s_e = day.init_value(this.d_type)
    this.s_time = this.s_e.s
    this.e_time = this.s_e.e
    // 获取车间下拉列表
    this.export_s_time = this.s_time
    this.export_e_time = this.e_time
    this.export_value = this.t_value
    this.getWorkshop()
  },
  methods: {


    // 车间下拉改变
    change_Workshop(id) {
      this.Workshop_value = id
      this.ProductionLine_value = null
      this.ProductionLine = []
      this.getProductionLine(0)
    },
    // 车间用汽统计表格----年
    detailDataForYear() {
      this.$axios
        .post(this.Eelec + "/steamMeter/detailDataForYear", {
          dateType: this.t_value,
          unitId: this.ProductionLine_value === '-1' ? this.Workshop_value : this.ProductionLine_value,
          // unitId: 11,
          startTime: this.s_time,
          endTime: this.e_time,
          pageNum: this.page.current_page,
          pageSize: this.page.pageSize,
          type: this.ProductionLine_value === '-1' ? -1 : 1
        })
        .then(res => {
          if (res.data.code === 200) {
            this.loading_table = false
            this.tableData = res.data.data.data
            this.page.totalCount = res.data.data.totalCount
            this.year_month_type_showtable = true
          }
        })
    },
    // 车间用汽统计表格----月
    detailDataForDay() {
      this.$axios
        .post(this.Eelec + "/steamMeter/detailDataForDay", {
          dateType: this.t_value,
          unitId: this.ProductionLine_value === '-1' ? this.Workshop_value : this.ProductionLine_value,
          // unitId: 11,
          startTime: this.s_time,
          endTime: this.e_time,
          pageNum: this.page.current_page,
          pageSize: this.page.pageSize,
          type: this.ProductionLine_value === '-1' ? -1 : 1
        })
        .then(res => {
          if (res.data.code === 200) {
            this.loading_table = false
            this.tableData = res.data.data.data
            this.page.totalCount = res.data.data.totalCount
            this.year_month_type_showtable = false
          }
        })
    },
    // 车间用汽统计-用汽曲线
    curveData() {
      this.$axios
        .post(this.Eelec + "/steamMeter/curveData", {
          dateType: this.t_value,
          unitId: this.ProductionLine_value === '-1' ? this.Workshop_value : this.ProductionLine_value,
          // unitId: 11,
          startTime: this.s_time,
          endTime: this.e_time,
          type: this.ProductionLine_value === '-1' ? -1 : 1
        })
        .then(res => {
          if (res.data.code === 200) {
            this.ecline_loading = false
            if (res.data.data && res.data.data.length) {
              this.ecb_data = [{
                name: '用汽量',
                value: res.data.data
              }]
            } else {
              this.ecb_data = []
            }
          } else {
            this.ecb_data = []

          }
        })
    },
    // 获取车间下拉列表
    getWorkshop() {
      this.$axios
        .post(this.Eelec + "/steamMeter/getWorkshop", {
          custID: sessionStorage.getItem("custId")
        })
        .then(res => {
          if (res.data.code === 200) {
            this.Workshop = res.data.data
            this.Workshop_value = res.data.data[0].id
            this.export_Workshop_value = res.data.data[0].id
            this.ProductionLine_Workshop_value += 1
            // 获取生产线下拉列表
            this.getProductionLine(1)
          }
        })
    },
    getProductionLine(n) {
      this.$axios
        .post(this.Eelec + "/steamMeter/getProductionLine", {
          id: this.Workshop_value
          // id:36
        })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data && res.data.data.length) {
              this.ProductionLine.push({
                name: '全部',
                id: '-1'
              })
              for (var i = 0; i < res.data.data.length; i++) {
                this.ProductionLine.push({
                  name: res.data.data[i].name,
                  id: res.data.data[i].id,
                })
              }
              this.ProductionLine_value = this.ProductionLine[0].id
              this.ProductionLine_Workshop_value += n
              // console.log(this.ProductionLine)
            }
          }
        })
    },


    t_export() {
      if (this.export_value === 2) {
        // 报表导出------月
        this.detailDataForExcelDay()
      } else {
        // 报表导出------年
        this.detailDataForExcelYear()
      }
    },
    // 报表导出------年
    detailDataForExcelYear() {
      this.$axios
        .post(this.Eelec + "/steamMeter/detailDataForExcelYear", {
          dateType: this.export_value,
          unitId: this.export_Workshop_value,
          startTime: this.export_s_time,
          endTime: this.export_e_time,
          pageNum: this.page.current_page,
          pageSize: this.page.pageSize,
          type: this.ProductionLine_value === '-1' ? -1 : 1
        })
        .then(res => {
          if (res.data.code === 200) {
            this.export_show = false
            if (res.data.data.path) {
              window.location.href = res.data.data.path
              this.$message({
                message: "导出成功",
                type: "success"
              })
            } else {
            }
          } else if (res.data.code === 1002) {
            this.export_show = false
            this.$message({
              message: res.data.msg,
              type: "error"
            })
          }
        })
    },
    // 报表导出------月
    detailDataForExcelDay() {
      this.$axios
        .post(this.Eelec + "/steamMeter/detailDataForExcelDay", {
          dateType: this.export_value,
          unitId: this.export_Workshop_value,
          startTime: this.export_s_time,
          endTime: this.export_e_time,
          pageNum: this.page.current_page,
          pageSize: this.page.pageSize,
          type: this.ProductionLine_value === '-1' ? -1 : 1
        })
        .then(res => {
          if (res.data.code === 200) {
            this.export_show = false
            if (res.data.data.path) {
              window.location.href = res.data.data.path
              this.$message({
                message: "导出成功",
                type: "success"
              })
            } else {
            }
          } else if (res.data.code === 1002) {
            this.export_show = false
            this.$message({
              message: res.data.msg,
              type: "error"
            })
          }
        })
    },
    // 点击查询
    t_button() {
      day
        .s_e(this.s_time, this.e_time, this.t_value)
        .then(() => {
          this.export_s_time = this.s_time
          this.export_e_time = this.e_time
          this.export_value = this.t_value
          this.export_Workshop_value = this.ProductionLine_value === '-1' ? this.Workshop_value : this.ProductionLine_value
          console.log("可以调方法了")
          this.loading_table = true
          this.ecline_loading = true
          // 车间用汽统计-用汽曲线
          this.curveData()
          if (this.t_value === 2) {
            // 车间用电统计表格------月
            this.detailDataForDay()
          } else {
            // 车间用电统计表格------年
            this.detailDataForYear()
          }
        })
        .catch(() => { })
    },
    // 切换年月日
    t_change(n) {
      if (n === 2) {
        this.content = '查询时间跨度最大为31天'
      }
      if (n === 3) {
        this.content = '查询时间跨度最大为12个月'
      }
      this.v_type = day.change_type(n).v
      this.d_type = day.change_type(n).d
      this.s_e = day.init_value(this.d_type)
      this.s_time = this.s_e.s
      this.e_time = this.s_e.e
    }
  }
}
</script>
 <style scoped lang='scss'>
</style>
